<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>修改密码-填写新密码</title>

    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../css/user/setting.css" rel="stylesheet"/>
    <link href="../../css/common.css" rel="stylesheet"/>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/fastclick.js"></script>
    <script src="../../js/api.js"></script>
    <script src="../../js/common.js"></script>
</head>
<body>
<div id="app">
    <div class="header-nav">
        <span>修改密码</span>
        <div class="icon"><img src="../../img/common/btn_back.png" alt=""></div>
    </div>

    <div class="container setting">
        <div class="xlb-input">
            <div class="left">新密码</div>
            <div class="right">
                <input  v-model="form.password" :type="chooseInput(input1)" placeholder="请输入新密码">
                <img @click="showText(1)" class="icon" :src="chooseImg(input1)" alt="">
            </div>
        </div>
        <div class="xlb-input">
            <div class="left">确认密码</div>
            <div class="right">
                <input v-model="form.passwordRe" :type="chooseInput(input2)" placeholder="请再次输入新密码">
                <img @click="showText(2)" class="icon" :src="chooseImg(input2)" alt="">
            </div>
        </div>

        <div  @click="update" class="xl-btn long no-shadow">确认</div>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            form:{
                password:'',
                passwordRe:'',//确认密码
            },
            input1:false,
            input2:false
        },
        methods: {
            update:function () {
                if(!this.form.password){
                    return mui.toast("请填写密码")
                }
                if(!this.form.passwordRe){
                    return mui.toast("请填写确认密码")
                }
                if(this.form.password != this.form.passwordRe ){
                    return mui.toast("两次填写不一致")
                }
                Resource.post(USER_UPDATE_PASSWORD_API, this.form, function (res) {
                    mui.toast("修改成功！")
                   mui.back();
                })
            },
            showText:function (type) {
                if(type == 1){
                    this.input1 = !this.input1
                }else {
                    this.input2 = !this.input2
                }
            },
            chooseImg:function (flag) {
                if(flag){
                   return '../../img/login/btn_visible.png'
                }else {
                    return '../../img/login/ic_invisible.png'
                }
            },
            chooseInput:function (flag) {
                if(flag){
                    return 'text'
                }else {
                    return 'password'
                }
            }

        }
    });

    //监听初始化
    mui.plusReady(function () {
        vm.form = {
            password:'',
            passwordRe:'',//确认密码
        };
    });
</script>
</body>
</html>